<template>
    <div class="app-container">
      <el-row :gutter="20">
        <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme"> 
        <!-- <el-col :span="4" :xs="24"> -->
          <pane size="16"> 
          <el-col>
            <div class="search-container">
            <el-input
              placeholder="搜索节点"
              v-model="searchQuery"
              clearable
              @input="handleSearch"
            />
            <!-- 竖线 -->
            <!-- <div class="vertical-line"></div> -->
          </div>
          <div class="head-container">
            <el-tree
              :data="parentAccountName"
              :props="defaultProps"
              :expand-on-click-node="true"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
      </pane>
        <!-- <el-col :span="20" :xs="24"> -->
          <pane size ="84">
            <el-col>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="仓库编码" prop="编码">
              <el-input
                v-model="queryParams.编码"
                placeholder="请输入仓库编码"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="仓库代码" prop="代码">
              <el-input
                v-model="queryParams.代码"
                placeholder="请输入仓库代码"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="仓库名称" prop="名称">
              <el-input
                v-model="queryParams.名称"
                placeholder="请输入仓库名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            
          </el-form>
          
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
          
        <div style="margin: 20px;"></div>
<el-form :model="warehouseForm" label-width="120px" >
  <el-row>
    <el-col :span="12">
      <el-form-item label="仓库编码" >
        <el-input v-model="warehouseForm.warehouseCode" disabled style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="仓库代码" >
        <el-input v-model="warehouseForm.warehouseNumber" disabled style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="仓库名称" >
        <el-input v-model="warehouseForm.warehouseName" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="所属部门" >
        <el-select v-model="warehouseForm.department" placeholder="请选择" style="width: 100%;">
          <el-option label="部门A" value="departmentA"></el-option>
          <el-option label="部门B" value="departmentB"></el-option>
          <!-- 可以根据需要添加更多选项 -->
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8">
      <el-form-item label="联系人" >
        <el-input v-model="warehouseForm.contactPerson" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="地址">
        <el-input v-model="warehouseForm.address" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="上级仓库">
        <el-input v-model="warehouseForm.superiorWarehouse" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8">
      <el-form-item label="电话" >
        <el-input v-model="warehouseForm.phone" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="邮政编码" >
        <el-input v-model="warehouseForm.postalCode" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="花纸仓库类型" >
        <el-select v-model="warehouseForm.flowerPaperType" placeholder="请选择" style="width: 100%;">
          <el-option label="类型A" value="typeA"></el-option>
          <el-option label="类型B" value="typeB"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="记价方式">
        <el-select v-model="warehouseForm.pricingMethod" placeholder="请选择" style="width: 100%;">
          <el-option label="方式A" value="methodA"></el-option>
          <el-option label="方式B" value="methodB"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="仓库类型">
        <el-input v-model="warehouseForm.warehouseType" disabled style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="最小资金储备" >
        <el-input v-model="warehouseForm.minFundReserve" type="number" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <!-- <el-form-item label="是否计算库存">
        <el-switch v-model="warehouseForm.calculateInventory" active-text="是" inactive-text="否" style="width: 100%;"></el-switch>
      </el-form-item> -->
      <el-form-item >
        <el-checkbox v-model="warehouseForm.CJGX">是否计算库存</el-checkbox>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="最大资金储备" >
        <el-input v-model="warehouseForm.maxFundReserve" type="number" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-form-item label="备注" >
        <!-- <el-textarea v-model="warehouseForm.remarks" style="width: 120%;"></el-textarea> -->
        <el-input type="textarea" v-model="warehouseForm.remarks"  maxlength="30" show-word-limit></el-input>
      </el-form-item>
    </el-col>
  </el-row>
   <!-- <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>  -->
</el-form>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
    <el-col :span="12">
      <el-form-item label="仓库编码" prop="仓库编码">
        <el-input v-model="form.仓库编码" disabled style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="仓库代码" prop="仓库代码">
        <el-input v-model="form.仓库代码" disabled style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="仓库名称" prop="仓库名称">
        <el-input v-model="form.仓库名称" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="所属部门" prop="所属部门">
        <el-select v-model="form.所属部门" placeholder="请选择" style="width: 100%;">
          <el-option label="部门A" value="departmentA"></el-option>
          <el-option label="部门B" value="departmentB"></el-option>
          <!-- 可以根据需要添加更多选项 -->
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8">
      <el-form-item label="联系人" prop="联系人">
        <el-input v-model="form.联系人" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="地址" prop="地址">
        <el-input v-model="form.地址" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="上级仓库" prop="上级仓库">
        <el-input v-model="form.上级仓库" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8">
      <el-form-item label="电话" prop="电话">
        <el-input v-model="form.电话" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="邮政编码" prop="邮政编码">
        <el-input v-model="form.邮政编码" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="花纸仓库类型" prop="花纸仓库类型">
        <el-select v-model="form.花纸仓库类型" placeholder="请选择" style="width: 100%;">
          <el-option label="类型A" value="typeA"></el-option>
          <el-option label="类型B" value="typeB"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="记价方式" prop="记价方式">
        <el-select v-model="form.记价方式" placeholder="请选择" style="width: 100%;">
          <el-option label="方式A" value="methodA"></el-option>
          <el-option label="方式B" value="methodB"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="仓库类型" prop="仓库类型">
        <el-input v-model="form.仓库类型" disabled style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="最小资金储备" prop="最小资金储备">
        <el-input v-model="form.最小资金储备" type="number" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <!-- <el-form-item label="是否计算库存">
        <el-switch v-model="warehouseForm.calculateInventory" active-text="是" inactive-text="否" style="width: 100%;"></el-switch>
      </el-form-item> -->
      <el-form-item >
        <el-checkbox v-model="form.CJGX">是否计算库存</el-checkbox>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-form-item label="最大资金储备" prop="最大资金储备">
        <el-input v-model="form.最大资金储备" type="number" style="width: 100%;"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-form-item label="备注" prop="备注">
        <!-- <el-textarea v-model="form.备注" style="width: 120%;"></el-textarea> -->
        <el-input type="textarea" v-model="warehouseForm.remarks"  maxlength="30" show-word-limit></el-input>
      </el-form-item>
    </el-col>
  </el-row>
    </el-form> 
    <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
        </el-col> 
      </pane>
    </splitpanes> 
      </el-row>
    </div>
  </template>
  
 <script>
 import ImageUpload from '@/components/ImageUpload'
 import { Splitpanes, Pane } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
 export default{
  components: { Splitpanes, Pane },
  data() {
    return {
      labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
              // 标题
      title:null,
      // 总条数
      total:0,
      // 打开弹出框
      open:false,
      // 表格
      form:{},
      // 校验
      rules:{},
      parentAccountName:[{
        label:'仓库资料树',
        children:[{
            label: '原料仓库',
          }  ,{
            label: '花纸/半成品仓库',
          },{
            label: '半成品仓库',
          children:[{
            label: '塑料半成品仓库',
          children: [{
            label: '塑料半成品正品'
          }]},{
            label: '半成品二等库',
          },{
            label: '塑料半成品库存',
          },{
            label: '密胺半成品仓库',
          },]},{
            label: '成品仓库'
          },{
            label: '注塑仓库'
          },{
            label: '成型仓库'
          },{
            label: '江西分厂原料库'
          },{
            label: '江西仓库车间仓库'
          }
        ]
      }],
      warehouseForm: {
        warehouseCode: '10', // 仓库编码，假设为只读
        warehouseNumber: '10', // 仓库代码，假设为只读
        warehouseName: '', // 仓库名称
        department: '', // 所属部门
        contactPerson: '', // 联系人
        address: '', // 地址
        superiorWarehouse: '', // 上级仓库
        phone: '', // 电话
        postalCode: '', // 邮政编码
        flowerPaperType: '', // 花纸仓库类型
        pricingMethod: '', // 记价方式
        warehouseType: '车间仓库', // 仓库类型，假设为只读
        minFundReserve: '', // 最小资金储备
        calculateInventory: false, // 是否计算库存
        maxFundReserve: '', // 最大资金储备
        remarks: '' // 备注
      },
      defaultProps: {
          children: 'children',
          label: 'label'
      },
      queryParams:{
        
      },
      showSearch: true,
      single: false,
      multiple: false,
      tableData:[],
    }
  },
  methods: {
    submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(data){
        console.log(data);
      },
      handleAdd() {
        this.title = '新增'
      this.open = true;
      this.isEdit = false;
      },
      handleUpdate(row) {
        this.title = '修改'
      this.open = true;
      this.isEdit = false;
      this.form = row;
      },
      handleDelete(){},
      handleExport(){},
      handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
  },
}
 </script>

